<template>
  <div class="container">
    <div>
      <h3>This is a About Page</h3>
      <p @click="$store.commit('add')">counter: {{$store.state.counter}}</p>
      <p @click="$store.dispatch('add')">async-counter: {{$store.state.counter}}</p>
    </div>
    <div class="image" v-for="img in imgData" :key="img.id">
      <img v-lazy="img.src">
    </div>
  </div>
</template>

<script>
import axios from "axios"

import {ref} from "vue";

export default {
  name: "About",
  setup() {
    let imgData = ref([])
    axios.get("http://localhost:3000/imgs").then((res) => {
      imgData.value = res.data
    })
    return {
      imgData
    }
  }
}
</script>

<style scoped>
  .container {
    overflow: auto;

    width: auto;
  }
  .image {
    width: 200px;
    margin: 0 auto;
  }
</style>